{% extends "base.html" %}
{% block content %}
{% load static %}
<link href="{% static 'css/console_.css' %}" type="text/css" rel='stylesheet' />
<div class="header">
<!--    <img src='/static/image/ark33.gif' style="width:80px ; float:right ; margin-right:31%"/>-->
   <div><h1>远程控制台</h1>
   </div>
    <form method="POST">
        {% csrf_token %}

        <h4 class= "mt-2">连接方式:</h4>
        <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
          <input type="radio" class="btn-check" name="btnradio" id="btnradio1" value="SSH" autocomplete="off" checked>
          <label class="btn btn-outline-primary" for="btnradio1">SSH</label>

          <input type="radio" class="btn-check" name="btnradio" id="btnradio2" value="Telnet" autocomplete="off">
          <label class="btn btn-outline-primary" for="btnradio2">Telnet</label>
        </div>

        <h4 class= "mt-1"></h4>
        <table class="table table-hover">
            <thead><tr class="table-primary">
                <th scope="col">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspID</th>
                <th scope="col">IP地址</th>
                <th scope="col">主机名</th>
                <th scope="col">厂商</th>
<!--                <th scope="col">端口状态</th>-->
            </tr></thead>
            <tbody>
            {% for device in Devices %}
                <tr class="table-info">
<!--                <th scope="row"><input type="radio" name="device" value="{{ device.id }}">&nbsp&nbsp&nbsp&nbsp{{device.id}}</th>-->
                <th scope="row">
                    <div class="form-check">
                      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="{{ device.id }}">
                      <label class="form-check-label" for="exampleRadios1">&nbsp&nbsp{{device.id}}</label>
                    </div></th>
                <td>{{device.ip_address}}</td>
                <td>{{device.hostname}}</td>
                <td>{{device.vendor}}</td>
                </tr>
            {% endfor %}
            </tbody></table>
        <textarea class="form-control" rows="10" name="command"></textarea>
        <!--onclick="window.open('http://www.baidu.com')"打开新页面-->
        <button type="submit" class="mt-3 btn btn-primary">提交命令</button>
    </form>
</div>
{% endblock %}